<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 500px;
            padding-bottom: 100px;
            border: 1px solid black;
            position: relative;
        }

        .dao {
            cursor: pointer;
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 500px;
            height: 200px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .left div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border-bottom: 1px solid #ccc;
            font-size: 20px;
        }

        .right img {
            width: 360px;
            height: 200px;
            margin-top: 30px;
        }

        .right span {
            font-size: 20px;
        }

        .gong {
            width: 500px;
            height: 30px;
            border: 1px solid black;
        }

        .bottom {
            position: absolute;
            bottom: 0px;
            width: 450px;
            height: 200px;
            background-color: white;
            display: none;
        }

        .jiao {
            width: 450px;
            height: 80px;
            background-color: #3c3c3e;
            position: absolute;
            bottom: 0px;
            border-radius: 50px;
        }

        .hao {
            width: 150px;
            height: 50px;
            border-radius: 50px;
            background-color: #25bdd2;
            color: white;
            float: right;
            margin-top: 20px;
            font-size: 18px;
        }

        .z {
            font-size: 20px;
            display: inline-block;
            margin-top: 30px;
            margin-left: 30px;
            color: #fff;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>

<body>
    <div class="big">
        <!-- 地图 -->
        <span style="font-size: 20px;font-weight: 900;border: 1px solid black;" class="dao">济南融创茂店></span>

        <!-- 轮播图 -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./图1.png"></div>
                <div class="swiper-slide"><img src="./图2.png"></div>
                <div class="swiper-slide"><img src="./图3.png"></div>
                <div class="swiper-slide"><img src="./图4.png"></div>
                <div class="swiper-slide"><img src="./图3.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <!-- 公告 -->
        <div class="gong" style="display: inline-block;">
            <span>客官：请适度点餐，光盘行动拒绝浪费，使用公勺公筷 &emsp;\/</span>
        </div><br>

        <!-- 公告提示框 -->
        <div class="bottom">
            <div style="font-size: 18px;display: inline-block;margin-bottom: 20px;">商家公告</div><button
                style="float: right;" onclick="cha()">x</button><br>
            <div style="color: gray;font-size: 18px;display: inline-block;height: 60px;">客官：请适度点餐，光盘行动拒绝浪费，使用公勺公筷</div>
            <hr>
            <button style="background: #25bdd2;width: 400px;height: 60px;color: #fff;font-size: 20px;border: none;"
                onclick="ok()">知道了</button>
        </div>

        <!-- 切换栏 -->
        <div class="left" style="display: inline-block;border: 1px solid black;width: 100px;">
            <div onclick="one()">新品推荐</div>
            <div onclick="two()">大虾锅</div>
            <div onclick="three()">烤鱼</div>
        </div>
        <div class="right" style="display: inline-block;width: 393px;">
            <!-- 1 -->
            <div class="one" style="display: inline-block;">

            </div>

            <!-- 2 -->
            <div class="two" style="display: inline-block;display: none;">
                <div>
                    <img src="./烤鱼.png"><br>
                    <span>烤鱼</span><br>
                    <span>￥28/份</span>
                </div>
                <div>
                    <img src="./菜2.png"><br>
                    <span>大虾锅</span><br>
                    <span>￥89/份</span>
                </div>
            </div>

            <!-- 3 -->
            <div class="three" style="display: inline-block;display: none;">
                <div>
                    <img src="./鸡爪.png"><br>
                    <span>鸡爪</span><br>
                    <span>￥28/份</span>
                </div>
                <div>
                    <img src="./菜2.png"><br>
                    <span>大虾锅</span><br>
                    <span>￥89/份</span>
                </div>
            </div>
        </div>

        <!-- 菜单详情 -->
        <div class="clear" style="background: white;">

        </div>

        <!-- 提交 -->
        <div class="jiao">
            <div class="z">总价：￥</div>
            <button onclick="hao()" class="hao">选好了</button>
        </div>
    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        // 渲染
        var cai = [{
            id: 0,
            name: '蓝莓山药',
            img: './菜1.png',
            price: 28,
            num: 0
        }, {
            id: 1,
            name: '大虾锅',
            img: './菜2.png',
            price: 89,
            num: 0
        }]

        function fn() {
            document.querySelector('.one').innerHTML = ''
            cai.forEach(item => {
                document.querySelector('.one').innerHTML += `
            <div>
                <img src="${item.img}" onclick='xq(${item.id})'><br>
                <span>${item.name}</span><br>
                <span>￥${item.price}/份</span>
                <button onclick='jian(${item.id})'>-</button>
                <span>${item.num}</span>
                <button onclick='jia(${item.id})'>+</button>
            </div>`
            })
        }
        fn()

        document.querySelector('.dao').addEventListener('click', () => {
            location.assign('./地图.html')
        })

        // 轮播图
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });

        // 切换栏
        function one() {
            document.querySelector('.one').style.display = 'block'
            document.querySelector('.two').style.display = 'none'
            document.querySelector('.three').style.display = 'none'
        }

        function two() {
            document.querySelector('.two').style.display = 'block'
            document.querySelector('.one').style.display = 'none'
            document.querySelector('.three').style.display = 'none'
        }

        function three() {
            document.querySelector('.three').style.display = 'block'
            document.querySelector('.one').style.display = 'none'
            document.querySelector('.two').style.display = 'none'
        }

        // 公告
        document.querySelector('.gong').addEventListener('click', () => {
            document.querySelector('.bottom').style.display = 'block'
        })

        function ok() {
            document.querySelector('.bottom').style.display = 'none'
        }

        function cha() {
            document.querySelector('.bottom').style.display = 'none'
        }

        // 菜品详情
        function xq(id) {
            var a = cai.find(item => item.id == id)
            cai.forEach(item => {
                document.querySelector('.clear').innerHTML = `
                <img src="${item.img}" style='width: 360px;height: 200px;'><br>
                <span>￥：${item.price}/份</span>`
            })
        }

        // 加减数量
        function jia(id) {
            var a = cai.findIndex(item => item.id == id)
            cai[a].num++
            fn()
        }

        function jian(id) {
            var a = cai.findIndex(item => item.id == id)
            if (cai[a].num != 0) {
                cai[a].num--
                fn()
            }
        }

        // 提交点餐
        function hao() {
            var a = []
            var b = cai.find(item => {
                if(item.checked) {
                    a.push(item)
                }
            })
            location.assign('./订单.html')
        }
    </script>
</body>

</html>